/**
 * 商品品类列表组件
 */
import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import {Link} from 'react-router-dom';
import './index.scss';
//引入通用列表组件
import TableList from 'tool/table-list/index.jsx';
import CategoryService from  'service/category-service.jsx';
import Tool from  'tool/tool.jsx';
const _category = new CategoryService();
const _req = new Tool();

class CategoryList extends React.Component{

  constructor(props){
    super(props);
    //要给data初始化成数组，不然不能调用data
    this.state={
      parentCategoryId: (this.props.location.state || {} ).pid || 0,//添加商品品类过来没有state字段，会报错undefined
      data: [],
    }
    this.loadCategoryList = this.loadCategoryList.bind(this);
  }
  componentDidMount(){
    this.loadCategoryList();
  }
  //查看子品类，路径改变，组件没变，需要在componentDidUpdate生命周期函数中对组件列表重新加载
  componentDidUpdate (prevProps,prevState){
    //比较上一次和这次都路径名是否不同
    let oldPath = prevProps.location.pathname,
        newPath = this.props.location.pathname,
        newparentId = (this.props.location.state || {} ).pid || 0;
    //如果不同，就更新parentCategoryId，然后重新加载loadCategoryList
       if(oldPath !== newPath){
          this.setState({
            parentCategoryId : newparentId
          },()=>{
            this.loadCategoryList();
          })
       } 
  }
  //获取商品品类列表
  loadCategoryList(){
    let {parentCategoryId} =this.state;
   //请求接口
   _category.getCategoryList(parentCategoryId).then(res => {
      this.setState({
          data:res
        });
    },errMsg => {
        _req.errorTips(errMsg);
    });
 }
 //修改品类名称
 onChangeName(categoryId,categoryName){
   //设置弹窗
  let newName = window.prompt("请输入新的品类名称：",categoryName);
  //判断newName是否存在
  if(newName){
    //请求修改名称接口
    _category.ChangeCategoryName({
      categoryId: categoryId,
      categoryName: newName
    }).then(res=>{
      _req.successTips(res);
      //修改成功后重新加载列表
      this.loadCategoryList();
    },errMsg=>{
      _req.errorTips(errMsg);
    })
    }
 }

 render(){ 
   let tableHeaders=[
     {name:'品类ID', width:'10%'},
     {name:'品类名称', width:'70%'},
     {name:'操作', width:'20%'},
   ]
  return(
            <div id="page-wrapper">
              <PageTile title='品类管理'>
                <div className="page-header-add">
                  <Link to='/category/save' className='btn btn-primary btn-add'>
                    <i className="fa fa-plus" aria-hidden="true"></i>
                    <span>添加品类</span> 
                  </Link>
                </div>
                <span className="show-id">当前品类分类ID: {this.state.parentCategoryId}</span>
              </PageTile>
              <TableList tableHeaders={tableHeaders}>
                {
                  this.state.data.map((category,index)=>
                           (
                              <tr key={index}>
                                  <td>{category.id}</td>
                                  <td>
                                    <p>{category.name}</p>
                                  </td>
                                  <td>
                                   <span  className="change-name" onClick={e=>{this.onChangeName(category.id,category.name)}}>修改名称</span>
                                   {
                                      category.parentId === 0 
                                      ?  <Link className="operate-box"  
                                            to={{ pathname: `/category/index/${category.id}`,state: {pid:category.id} }}>
                                            查看其子品类
                                         </Link>
                                      : null
                                   }                  
                                  </td>
                              </tr>
                            )
                         )
                }
              </TableList>
            </div>
      );
    }
}

export default CategoryList;
